<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">获取数据</button>

    <!-- <script src="http://localhost:3000"></script> -->

    <script>
        // 1. 借助script的src属性给后端发送一个请求，且携带一个参数('callback')
        // 2. 前端在window对象上添加了一个 callback 函数
        // 3. 后端接收到这个参数 'callback' 后，将要返回给前端的数据data和 这个参数'callback' 进行拼接，成'callback(data)',并返回
        // 4. 因为window上已经有一个callback函数，后端又返回了一个形如'callback(data)',浏览器会将该字符串执行成callback的调用

        function jsonp(url,cb){
            return new Promise((resolve,reject) => {
                // 原理
                const script = document.createElement('script');
                script.src = `${url}?cb=${cb}` // http://localhost:3000?cb='callback'
                document.body.appendChild(script);// 将script标签添加到body中,浏览器自动会请求src里面的内容

                window[cb] = (data) =>{
                    resolve(data);
                }

                // {
                //     "callback" : () => {}
                // }

            })    
        }

        let btn = document.getElementById('btn');
        btn.addEventListener('click',()=> {
            // 发请求
            // fetch('http://localhost:3000')
            // .then(response =>{
            //     return response.json()
            // })
            // .then(res =>{
            //     console.log(res)
            // })
            jsonp('http://localhost:3000','callback')
            .then(res =>{
                console.log('后端的返回结果为：' + res);
            })
        })
    </script>
</body>
</html>